<!-- 网站首页 -->
<template>
  <div class="first-page-wrap">
    <div class="wrapper">
      <div class="avatar animate__animated animate__fadeInDown">
        <img src="../assets/image/avatar2.jpg" alt="" />
      </div>
      <div class="author animate__animated animate__fadeInDown">风紧扯呼</div>
      <div class="yulu animate__animated animate__fadeInLeft">
        <span>人生当苦无妨,良人当归即好</span>
        <span>—</span>
        <span>烽火戏诸侯《雪中悍刀行》</span>
      </div>
      <el-button
        class="el-btn animate__animated animate__fadeInRight"
        @click="$router.push('/layout')"
        >进入博客</el-button
      >
      <i
        class="
          iconfont
          icon-xiangxiazhanhang
          animate__animated animate__fadeInRight
        "
      ></i>
      <div class="footer animate__animated animate__fadeInUp">
        <el-tooltip class="github" effect="light" placement="top" offset="50">
          <template #content>
            <div class="github-message">点击我跳转到我的gitee</div>
          </template>
          <a href="https://gitee.com/zhao-fada" target="_blank"
            ><i class="iconfont icon-github"></i
          ></a>
        </el-tooltip>
        <el-tooltip class="weixin" effect="light" placement="top">
          <template #content>
            <img src="../assets/image/微信二维码.png" alt="" />
          </template>
          <i class="iconfont icon-weixin"></i>
        </el-tooltip>
        <el-tooltip class="shop" effect="light" placement="top" offset="50">
          <template #content>
            <div class="shop-message">要购物点这里哦！</div>
          </template>
          <a href="https://m.msyc.cc/wx/index.html?tmn=712820" target="_blank"
            ><i class="iconfont icon-Shop"></i
          ></a>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FirstPage",
  setup() {
    return {};
  },
};
</script>
<style lang='less' scoped>
.first-page-wrap {
  width: 100vw;
  height: 100vh;
  background: url("../assets/image/background.jpg");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .avatar {
      width: 180px;
      height: 180px;
      border-radius: 90px;
      overflow: hidden;
      border: 3px solid #f7f1e3;
      margin-bottom: 25px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .author {
      font-size: 18px;
      font-weight: 600;
      color: #f7f1e3;
      letter-spacing: 2px;
    }
    .yulu {
      font-size: 16px;
      color: #f7f1e3;
      letter-spacing: 8px;
      margin: 60px 0 60px;
      font-weight: 600;
      span:nth-child(1) {
        margin-right: 20px;
      }
      span:nth-child(2) {
        margin-right: 10px;
      }
    }
    .el-btn {
      background-color: #05c46b;
      border: unset;
      color: rgb(252, 248, 248);
      width: 100px;
      height: 40px;
    }
    .iconfont {
      font-size: 40px;
      margin-top: 50px;
      color: #f0e9e9;
    }
    .footer {
      .iconfont {
        font-size: 50px;
      }
      margin-top: 40px;
      i:nth-child(2) {
        margin: 0 50px;
      }
    }
  }
}
.el-popper {
  img {
    width: 200px;
    height: 200px;
  }
  .github-message {
    font-size: 15px;
  }
  .shop-message {
    font-size: 15px;
  }
}
</style>